/**
 * 新闻列表页面组件
 * 显示所有已发布的新闻列表
 * 提供新闻浏览和跳转到详情页的功能
 */
import React from 'react'
import { Card, List, Breadcrumb, Spin, Alert } from 'antd'
import { useNavigate } from 'react-router-dom'
import { usePublishedNews } from '../../hooks/useNewsManage'
import { News as NewsType } from '../../types/news'

/**
 * 新闻列表页面组件
 * 展示系统中所有已发布的新闻
 * 
 * 功能特点：
 * 1. 使用自定义Hook获取已发布新闻列表
 * 2. 支持分页显示
 * 3. 点击新闻标题可跳转到详情页
 * 4. 显示新闻分类和发布时间
 * 5. 包含加载状态和错误处理
 * 
 * @returns 新闻列表页面组件
 */
const News: React.FC = () => {
  // 使用自定义Hook获取已发布新闻列表数据
  const { data, isLoading, isError } = usePublishedNews()
  // 确保类型正确
  const newsList = data as NewsType[] || []
  // 用于页面导航的钩子
  const navigate = useNavigate()

  // 错误处理 - 当加载失败时显示错误提示
  if (isError) {
    return (
      <Alert
        message="加载失败"
        description="无法加载新闻列表，请稍后重试"
        type="error"
        showIcon
      />
    )
  }

  return (
    <div className="site-card-border-less-wrapper">
      {/* 面包屑导航 */}
      <Breadcrumb
        items={[
          { title: '首页' },
          { title: '新闻列表' },
        ]}
        style={{ margin: '16px 0' }}
      />
      
      {/* 新闻列表卡片 */}
      <Card title="全球新闻" bordered={false} style={{ width: '100%' }}>
        {/* 加载状态包装 */}
        <Spin spinning={isLoading}>
          {/* 新闻列表组件 */}
          <List
            dataSource={newsList}
            renderItem={(item: NewsType) => (
              <List.Item>
                <List.Item.Meta
                  // 标题点击时导航到详情页
                  title={<a onClick={() => navigate(`/detail/${item.id}`)}>{item.title}</a>}
                  description={
                    <div>
                      {/* 显示分类信息 */}
                      <span>{item.category?.title || '未分类'}</span>
                      {/* 显示发布时间 */}
                      <span style={{ marginLeft: '10px' }}>
                        {item.publishTime ? new Date(item.publishTime).toLocaleDateString() : '未知日期'}
                      </span>
                    </div>
                  }
                />
              </List.Item>
            )}
            // 分页配置
            pagination={{
              pageSize: 5,
            }}
            // 空数据提示
            locale={{ emptyText: '暂无新闻' }}
          />
        </Spin>
      </Card>
    </div>
  )
}

export default News